<template>
	<view class="content util-page-height">
		<view class="uni-flex uni-column uni-common-mt util-full-height util-flex-mian-center">
			<view class="header"></view>
			<view class="uni-common-mt main">
				<view class="uni-flex uni-row">
					<label class="uni-flex uni-label" for="location">
						<text class="label-text">队列名称</text>
					</label>
					<uni-easyinput id="location" class="input" v-model="location" placeholder="建议以社区地址作为队列名称" suffixIcon="location"></uni-easyinput>
				</view>
				<view class="uni-flex uni-row uni-common-mt">
					<radio-group class="uni-flex radio-group" name="radio" @change="onTypeChanged">
						<label v-for="(item, index) in typeItems" :key="item.value">
							<radio :value="String(item.value)" :checked="index === currentTypesIndex" /><text>{{ item.text }}</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="uni-flex uni-row button-group footer">
				<button class="button" type="primary" @click="onCreated">创建</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				community: "",
				contact: "",
				phone: 123,
				typeItems: [
					{ text: "有一码通", value: 0 },
					{ text: "无一码通", value: 1 },
					{ text: "无限制", value: 2 }
				],
				currentTypesIndex: 2,
				location: "云著一队"
			}
		},
		onLoad() {

		},
		methods: {
			onTypeChanged(e) {
				const value = e.detail.value;
				const index = this.typeItems.findIndex(item => String(item.value) === value);
				this.currentTypesIndex = index;
			},
			async onCreated() {
				const result = await this.$API.Community.register({
					name: this.location,
					checked_type: this.typeItems[this.currentTypesIndex].value
				});
				if (result && result.success) {
					result.id && this.$API.Community.setListIdentifier(result.id);
					uni.navigateTo({
						url: "./index",
						// success: res => {
						// 	res.eventChannel.emit('acceptDataFromOpenerPage', { data: result })
						// }
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.header {
		flex: 1;
	}

    .main {
		flex: 5;
	}

    .footer {
		justify-content: space-around;
		flex: 3;
	}

	.uni-label {
		justify-content: left;
		align-items: center;
	}

	.input {
		width: 400rpx;
		overflow: hidden;
		border-radius: 4px;
		background: #fff;
	}

	.radio-group {
		justify-content: space-around;
	}

	.button-group {
		justify-content: space-between;
	}
	
	.button {
		width: 100%;
		margin: 0;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
	}

	#location {
		position: relative;
	}

	.location-icon {
		width: 46rpx;
		height: 46rpx;
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.radio-group {
		margin-top: 100rpx;
	}
</style>
